<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>主机管理系统</title>
    <link rel="stylesheet"  href="/static/js/Font-Awesome-3.2.1/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/host.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/lmc.css"/>
</head>
<body>
    <div class="col-12 header blue f-white">
        <div class="left">
            <i class="icon-laptop icon-large"></i>
            <a href="/index/"><span>主机管理系统</span></a>
        </div>
        <div class="right loginout">
            <a href="/login_out/"><span>退出登录</span></a>
        </div>
        <div class="clear-float"></div>
    </div>
    <div class="content">
        {% if sign %}
            <div class="div-btn col col-12">
                <button id="show_modal" class="btn btn-xl success"><i class="icon-plus"></i>新增</button>
                <button id="test" class="btn btn-xl success"><i class="icon-plus"></i>功能测试</button>
            </div>
            <table class="tb">
                <thead class="info">
                    <tr>
                        <th class="">主机名称</th>
                        <th class="">主机地址</th>
                        <th class="">端口</th>
                        <th class="">状态</th>
                        <th class="">操作</th>
                    </tr>
                </thead>
                <tbody id="tb">
            {% if host_info == False %}
                    <tr><td class="f-warring" colspan="5"><i class="icon-info-sign"></i>您还没有可管理的主机</td></tr>
            {% else %}
                {% for row in host_info %}
                    <tr>
                        <td name="host-name" target-data="{{row.id}}">{{row.name}}</td>
                        <td name="host-ip">{{row.ip}}</td>
                        <td name="host-port">{{row.port}}</td>
                        {% if row.status == '停机' %}
                            <td name="host-status">
                                <span class="f-error"><i class="icon-circle"></i></span>
                                {{row.status}}
                            </td>
                        {% else %}
                            <td name="host-status">
                                <span class="f-success"><i class="icon-circle"></i></span>
                                {{row.status}}
                            </td>
                        {% endif %}
                        <td>
                            <button name="del-host" target-data="{{row.id}}" class="btn btn-ml error"><i class="icon-trash"></i>删除</button>
                            <button name="edit-host" target-data="{{row.id}}" class="btn btn-ml orange"><i class="icon-pencil"></i>修改</button>
                        </td>
                    </tr>
                {% endfor %}
            {% endif %}
                </tbody>
            </table>

        {% else %}
            <h1 class="f-error"><i class="icon-remove"></i>非法访问</h1>
        {% endif %}

    </div>
    <div class="shadow blue hidden"></div>
    <div class="modal col-6 hidden">
        <div class="m-title f-center">新增主机</div>
        <div class="row">
            <div class="col col-2"><label><span>*</span>主机名称：</label></div>
            <div class="col col-5"><input require="true" filed="string" type="text" name="hostname" /></div>
            <div class="col col-4 errmsg"></div>
        </div>
        <div class="row">
            <div class="col col-2"><label><span>*</span>主机地址：</label></div>
            <div class="col col-5"><input require="true" filed="ip" type="text" name="hostaddr" /></div>
            <div class="col col-4 errmsg"></div>
        </div>
        <div class="row">
            <div class="col col-2"><label><span>*</span>端口：</label></div>
            <div class="col col-5"><input require="true" filed="number" type="text" name="hostport" /></div>
            <div class="col col-4 errmsg"></i></div>
        </div>
        <div class="row">
            <div class="col col-2"><label><span>*</span>root：</label></div>
            <div class="col col-5"><input require="true" filed="string" type="text" name="hostroot" /></div>
            <div class="col col-4 errmsg"></i></div>
        </div>
        <div class="row">
            <div class="col col-2"><label><span>*</span>key：</label></div>
            <div class="col col-5"><input require="true" filed="string" type="password" name="hostkey" /></div>
            <div class="col col-4 errmsg"></div>
        </div>
        <div class="row m-btn">
            <div class="f-center">
                <button class="btn btn-xl success" id="add_host">新增</button>
                <button class="btn btn-xl error" id="cancel">取消</button>
            </div>
        </div>
    </div>
    <script src="/static/js/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/sha1.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/lmc.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/host.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>